<template>
    <div class="app-container giftDay_form-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker style="width:250px" :editable="false" :clearable="false" v-model="pickerDate"
                        value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                        @change="dateChange"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange"
                        style="width:150px">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px" @change="areaChange">
                        <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select clearable placeholder="选择机台" v-model="formInline.type" style="width:100px">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.name" placeholder="输入礼品编号/礼品名称" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px">
                            1.出货成本=出货数*成本单价
                            <br> 2.收入金额=刷卡的金额+扫码的金额
                            <br> 3.日均毛利=(收入金额-出货成本)/运营天数
                            <br> 4.总毛利率=(收入金额-出货成本)/收入金额
                            <br> 5.运营天数取值为该机台完成日报盘点的天数
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <el-table highlight-current-row :data="list" border size="small">
                <el-table-column align="center" prop="mno" label="机台编号" sortable></el-table-column>
                <el-table-column align="center" prop="char_project_type" label="机台名称" sortable>
                    <template slot-scope="scope">
                        {{scope.row.project_type}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="days" label="运营天数" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'支持出货机台为日报天数')"></el-table-column>
                <el-table-column align="center" prop="no_obsolete" label="神采礼品编号" sortable></el-table-column>
                <el-table-column align="center" prop="gift_name" label="礼品名称"></el-table-column>
                <el-table-column align="center" prop="money_cost" label="成本单价" sortable></el-table-column>
                <el-table-column align="center" prop="unitsshipped" label="出货数" sortable></el-table-column>
                <el-table-column align="center" prop="unitsshipped_money_cost" label="出货成本" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'出货成本=出货数*成本单价')"></el-table-column>
                <el-table-column align="center" prop="income_money" label="收入金额"
                    :render-header="(h,obj) => renderHeader(h,obj,'收入金额=刷卡的金额+扫码的金额')"></el-table-column>
                <el-table-column align="center" prop="day_profit" label="日均毛利" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'日均毛利=(收入金额-出货成本)/运营天数')"></el-table-column>
                <el-table-column align="center" prop="all_profit" label="总毛利率" sortable
                    :render-header="(h,obj) => renderHeader(h,obj,'总毛利率=(收入金额-出货成本)/收入金额')">
                    <template slot-scope="scope">
                        {{scope.row.all_profit+'%'}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box" v-if="list.length>0">
            <div class="pull-right mt10">
                总出货数：{{total_unitsshipped}}&#x3000;总出货成本：{{total_unitsshipped_money_cost|keepTwoNum}}&#x3000;总收入金额：{{total_income_money|keepTwoNum}}&#x3000;
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getStoreList,
        getAreaList,
        getTypeList,
    } from "@/api/storage_control/giftGain_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime, renderHeader } from '@/utils';
    export default {
        data() {
            return {
                renderHeader,
                total_unitsshipped: 0,
                total_unitsshipped_money_cost: 0,
                total_income_money: 0,
                listLoading: false,
                storeList: null,
                typeList: [],
                areaList: [],
                formInline: {
                    brand_id: '',
                    area_id: '',
                    store_id: '',
                    type: '',
                    begin_time: '',
                    end_time: '',
                    name: '',
                    look_del: '0'
                },
                total: [{ name: '合计' }],
                list: [],
                pickerOptions: pickerOptionsF(-1),
                pickerDate: pickerDateF(-1, -1)
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            dateChange() {
                this.formInline.type = '';
                this.areaChange();
            },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 279 }).then(response => {
                    this.storeList = response;
                   let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    this.storeChange();
                });
            },
            storeChange() {
                getAreaList({ sid: this.formInline.store_id }).then(response => {
                    this.areaList = response;
                    if(response.length > 0) {
                        this.formInline.area_id = response[0].id;
                    }
                    
                    this.areaChange();
                });
            },
            areaChange() {
                let data = {
                    begin_time: this.pickerDate ? this.pickerDate[0] : '',
                    end_time: this.pickerDate ? this.pickerDate[1] : '',
                    area_id: this.formInline.area_id,
                    store_id: this.formInline.store_id,
                    brand_id: this.formInline.brand_id,
                }
                getTypeList(data).then(response => {
                    this.typeList = response;
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                const that = this;
                that.total_unitsshipped = 0;
                that.total_unitsshipped_money_cost = 0;
                that.total_income_money = 0;
                getList(this.formInline).then(response => {
                    response.forEach(function (val, i) {
                        val.mno *= 1;
                        val.days *= 1;
                        val.unitsshipped *= 1;
                        val.income_money = (val.income_money / 1000000 * 1).toFixed(2) * 1;
                        val.money_cost = (val.money_cost / 1000000).toFixed(2) * 1;
                        val.unitsshipped_money_cost = (val.money_cost * val.unitsshipped).toFixed(2) * 1;
                        val.day_profit = ((val.income_money - val.unitsshipped_money_cost) / val.days).toFixed(2) * 1;
                        val.all_profit = val.income_money == 0 ? 0 : (((val.income_money - val.unitsshipped_money_cost) / val.income_money * 100).toFixed(2) * 1);
                        that.total_unitsshipped += val.unitsshipped * 1;
                        that.total_unitsshipped_money_cost += val.unitsshipped_money_cost * 1;
                        that.total_income_money += val.income_money.toFixed(2) * 1;
                    });
                    that.total_unitsshipped_money_cost = (that.total_unitsshipped_money_cost).toFixed(2);
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    };
</script>